import * as echarts from "echarts";

// 横向统计图
let config = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        backgroundColor: '#000',
        textStyle: {
            color: '#00e5aa',
            fontSize: 47
        }
    },
    grid: {
        left: '0%',
        right: '7%',
        bottom: '5%',
        top: '0%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 35,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    yAxis: {
        type: 'category',
        data: ['北京市', '绵阳市', '上海市', '深圳市', '广州市', '南充市', '广元市', '西安市', '成都市', '重庆市'],
        axisLabel: {
            fontSize: 35,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    series: [
        {
            type: 'bar',
            data: [7222, 7467, 8572, 13890, 13878, 23788, 35517, 51844, 83511, 143133],
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 1,
                        color: '#68dfd8'
                    },
                    {
                        offset: 0,
                        color: '#bdda60'
                    }]),
                }
            },
        }
    ]
}



// 饼图
const option = {
    grid: {
        left: '3%',
        right: '3%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#00e5aa',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: '78%',
            startAngle: 70,
            data: [
                { value: 128296, name: '重庆市' },
                { value: 107319, name: '四川省' },
                { value: 105778, name: '湖北省' },
                { value: 101714, name: '湖南省' },
                { value: 97957, name: '广东省' },
                { value: 83715, name: '海南省' },
                { value: 82273, name: '江苏省' },
                { value: 35540, name: '浙江省' },
                { value: 64417, name: '安徽省' },
                { value: 23862, name: '福建省' },
            ],
            label: {
                fontSize: 47,
                color: '#00e5aa',
            },
            labelLine: {
                length: '5%',
                length2: '8%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            itemStyle: {
                normal: {
                    color: function (colors) {
                        var colorList = [
                            '#fc8251',
                            '#5470c6',
                            '#91cd77',
                            '#ef6567',
                            '#f9c956',
                            '#75bedc',
                            '#4eb4f8',
                            '#00e5aa',
                            '#bdda60',
                            '#75bedc',
                        ];
                        return colorList[colors.dataIndex];
                    }
                },
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 20,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                }
            }
        }
    ]
}

// 性别分布
const pieOption = {
    grid: {
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#00e5aa',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            startAngle: 50,
            radius: ['40%', '60%'],
            data: [
                { value: 5500, name: '男' },
                { value: 4500, name: '女' }
            ],
            label: {
                fontSize: 47,
                color: '#00e5aa',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            itemStyle: {
                normal: {
                    color: function (colors) {
                        var colorList = [
                            '#ef6567',
                            '#f9c956',
                        ];
                        return colorList[colors.dataIndex];
                    }
                },
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 游客出行方式分布
const pieOption2 = {
    grid: {
        left: '0%',
        right: '7%',
        bottom: '5%',
        top: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#00e5aa',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '60%'],
            startAngle: 50,
            data: [
                { value: 55, name: '高铁' },
                { value: 23, name: '自驾' },
                { value: 12, name: '飞机' },
                { value: 10, name: '其他' },
            ],
            label: {
                fontSize: 47,
                color: '#00e5aa',
            },
            itemStyle: {
                normal: {
                    color: function (colors) {
                        var colorList = [
                            '#fc8251',
                            '#5470c6',
                            '#91cd77',
                            '#ef6567',
                        ];
                        return colorList[colors.dataIndex];
                    }
                },
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 游客出行方式分布
const pieOption3 = {
    grid: {
        left: '0%',
        right: '7%',
        bottom: '5%',
        top: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#00e5aa',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '60%'],
            data: [

                { value: 1000, name: '18岁以下' },
                { value: 2200, name: '18-30岁' },
                { value: 3500, name: '31-45岁' },
                { value: 1800, name: '45-55岁' },
                { value: 1500, name: '45-56岁以上' },
            ],
            label: {
                fontSize: 47,
                color: '#00e5aa',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            itemStyle: {
                normal: {
                    color: function (colors) {
                        var colorList = [
                            '#ef6567',
                            '#f9c956',
                            '#fc8251',
                            '#5470c6',
                            '#91cd77',
                            '#ef6567',
                        ];
                        return colorList[colors.dataIndex];
                    }
                },
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};


// 游客资产等级分布
const pieOption4 = {
    grid: {
        left: '0%',
        right: '7%',
        bottom: '5%',
        top: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#00e5aa',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '60%'],
            data: [

                { value: 4800, name: '低收入' },
                { value: 3200, name: '中等收入' },
                { value: 2000, name: '高收入' },
            ],
            label: {
                fontSize: 47,
                color: '#00e5aa',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            itemStyle: {
                normal: {
                    color: function (colors) {
                        var colorList = [
                            '#f9c956',
                            '#75bedc',
                            '#4eb4f8',
                        ];
                        return colorList[colors.dataIndex];
                    }
                },
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 游客资产等级分布
const pieOption5 = {
    grid: {
        left: '0%',
        right: '7%',
        bottom: '5%',
        top: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#00e5aa',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '60%'],
            data: [
                { value: 13587, name: '达川区' },
                { value: 18569, name: '大竹县' },
                { value: 11412, name: ' 万源县' },
                { value: 19266, name: ' 宣汉县' },
                { value: 18709, name: ' 开江县' },
                { value: 10992, name: ' 渠县' },
                { value: 10890, name: ' 通川县' },
            ],
            label: {
                fontSize: 47,
                color: '#00e5aa',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 滚动表
const config2 = {
    index: true,
    rowNum: 8,
    oddRowBGC: '',
    evenRowBGC: '',
    align: ['center'],
    data: [
        ['重庆市', '5021万'],
        ['成都市', '3765万'],
        ['西安市', '1200万'],
        ['广元市', '1108万'],
        ['南充市', '980万'],
        ['广州市', '876万'],
        ['深圳市', '833万'],
        ['上海市', '655万'],
        ['绵阳市', '653万'],
        ['北京市', '542万']
    ],
}


// 折线图
const option1 = {
    grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        bottom: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#000',
        textStyle: {
            color: '#00e5aa',
            fontSize: 47
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点'],
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 32,
            fontWeight: 'bold',
            color: '#ffffff',
        }
    },
    series: [
        {
            data: [703, 560, 653, 554, 655, 633, 627, 722, 975, 931, 727, 606, 938, 844, 872, 624, 541, 726, 570, 589, 940, 542, 889],
            type: 'line',
            smooth: true,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                        offset: 0,
                        color: '#65421f'
                    },
                    {
                        offset: 0,
                        color: '#00e5aa'
                    }
                ])
            },
            lineStyle: {
                normal: {
                    width: 5
                }
            }

        }
    ],
    color: ['#e4c058']
}

// 柱状图
const column = {
    grid: {
        left: '0%',
        right: '1%',
        bottom: '1%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#00e5aa',
            fontSize: 47
        }
    },
    xAxis: {
        type: 'category',
        data: ['重庆市', '成都市', '西安市', '广元市', '南充市', '广州市', '深圳市', '上海市', '绵阳市', '北京市'],
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 40,
            color: '#ffffff',
        }
    },
    series: [
        {
            data: [5021, 3765, 1200, 1108, 980, 876, 833, 655, 653, 542],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                        // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                        offset: 0,
                        color: '#b0d100'
                    }, {
                        offset: 1,
                        color: '#00e5aa'
                    }]),
                }
            },
        }
    ]
}

// 柱状图
const column2 = {
    grid: {
        left: '0%',
        right: '1%',
        bottom: '1%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#00e5aa',
            fontSize: 47
        }
    },
    xAxis: {
        type: 'category',
        data: ['重庆市', '成都市', '西安市', '广元市', '南充市', '广州市', '深圳市', '上海市', '绵阳市', '北京市'],
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 40,
            color: '#ffffff',
        }
    },
    series: [
        {
            data: [143133, 83511, 51844, 35517, 23788, 13878, 13890, 8572, 7467, 7222],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                        // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                        offset: 0,
                        color: '#b0d100'
                    }, {
                        offset: 1,
                        color: '#00e5aa'
                    }]),
                }
            },
        }
    ]
}

// 滚动表
const rollTable2 = {
    // index: true,
    rowNum: 5,
    oddRowBGC: '',
    evenRowBGC: '',
    align: ['center', 'center', 'center'],
    data: [
        ['达川区', '309111'],
        ['大竹县', '204851'],
        ['万源县', '417403'],
        ['宣汉县', '371635'],
        ['开江县', '448525'],
        ['渠县', '333227'],
        ['通川县', '311189'],
    ],
}

// 饼图
const option10 = {
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#fff',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: '70%',
            startAngle: 70,
            data: [
                { value: 47, name: '过夜' },
                { value: 53, name: '不过夜' },
            ],
            label: {
                fontSize: 47,
                color: '#fff',
            },
            labelLine: {
                length: '5%',
                length2: '8%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            itemStyle: {
                normal: {
                    color: function (colors) {
                        var colorList = [
                            '#fc8251',
                            '#5470c6',
                        ];
                        return colorList[colors.dataIndex];
                    }
                },
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 20,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                }
            }
        }
    ]
}

export default {
    config,
    option,
    config2,
    option1,
    column,
    column2,
    rollTable2,
    option10,
    pieOption,
    pieOption2,
    pieOption3,
    pieOption4,
    pieOption5

}